import React from "react";
import { Routes, Route, useMatch, useLocation } from "react-router-dom";
import PostList from "./post_list";
import Header from "./header";
import Post from "./post";

function Home(props) {
    let user_id = sessionStorage.getItem('user_id');
    let user_name = sessionStorage.getItem('user_name');

    const handleLogout = () => {
        sessionStorage.removeItem('user_id');
        sessionStorage.removeItem('user_name');
        user_id = null;
        user_name = null;
        window.location.reload();
    };

    const { location } = useLocation();

    return (
        <div>
            <Header
                username={user_name}
                onLogout={handleLogout}
                location={location}
            />
            <Routes>
                <Route
                    exact path={'*'}
                    element={<PostList userId={user_id} userName={user_name} {...props} />}
                />
                <Route
                    path={'posts/:id'}
                    element={<Post userId={user_id} userName={user_name} {...props} />}
                />
            </Routes>
        </div>
    );
}

export default Home;
